import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Button,
  Tag,
  Modal,
  Form,
  message,
  Table,
  Radio,
  Input,
  Icon,
} from 'antd';
import  moment from 'moment'
import  Chart from './Chart'
import L from 'leaflet';   //引入leaflet
import './index.less';
import './../Home/leaflet.less';
import P1 from './../../images/p1.png';
import BuildModalTitle from '@/components/BuildModalTitle';
import {  afterCloseModal } from '@/utils/utils';
import debounce from 'lodash/debounce';
@connect(({ waterworks, loading }) => ({
  waterworks,
  loading: loading.models.waterworks,
}))
@Form.create()
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      time:moment().format('YYYY-MM-DD HH:mm:ss'),
      data:{
        item1:(Math.random()*10).toFixed(2),
        item2:(Math.random()*10).toFixed(2),
        item3:(Math.random()*10).toFixed(2),
        item4:(Math.random()*10).toFixed(2),
        item5:(Math.random()*10).toFixed(2),
        item6:(Math.random()*10).toFixed(2),
        item7:(Math.random()*10).toFixed(2),
        item8:(Math.random()*10).toFixed(2),
        item9:(Math.random()*10).toFixed(2),
        item10:(Math.random()*10).toFixed(2),
      },
      modalTitle:'',
      unit:'',
      editRecord:[],
    };
  }

  componentDidMount() {

   const that=this;
    const { dispatch } = this.props;
    const {
      waterworks: { pageLoaded, scrollData },
    } = this.props;

    if (pageLoaded) {
      this.renderMap();

    } else {
      dispatch({
        type: 'waterworks/fetch',
        callback: () => {
          const { dispatch } = this.props;
          dispatch({
            type: 'waterworks/changeLoaded',
          });
          that.renderMap();
        },
      });

    }
   this.timer=setInterval(function() {
     console.log('set')
     dispatch({
       type: 'waterworks/fetch',
     });
   },10000)
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
    if( this.timer){
      clearInterval( this.timer)
    }
  }
  renderMap=()=>{
    var map = this.map=L.map('mapDiv', {
      crs: L.CRS.Simple,
      minZoom: -1,
      zoom: 1,
      maxZoom:1,
      zoomSnap: 0.25,
    });
    var bounds = [[0, 0], [950, 1689]];
    var image = L.imageOverlay(P1, bounds).addTo(map);
    map.fitBounds(bounds);

    var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svgElement.setAttribute('viewBox', '52 44 1573 976');
    svgElement.innerHTML = `
    <g>
        <path class="leaflet-ant-path ant-path-1591603316531 leaflet-clickable" stroke-linejoin="round"
              stroke-linecap="round" stroke="#ffffff" stroke-opacity="0.5" stroke-width="5" stroke-dasharray="10,20"
              fill="none" d="M490 805L805 805" data-animated="true" style="animation-duration: 38.037s;"></path>
    </g>
     <g>
        <path class="leaflet-ant-path ant-path-1591603316531 leaflet-clickable" stroke-linejoin="round"
              stroke-linecap="round" stroke="#ffffff" stroke-opacity="0.5" stroke-width="5" stroke-dasharray="10,20"
              fill="none" d="M1155 800L1305 800" data-animated="true" style="animation-duration: 38.037s;"></path>
    </g>
    <g>
        <path class="leaflet-ant-path ant-path-1591603316531 leaflet-clickable" stroke-linejoin="round"
              stroke-linecap="round" stroke="#ffffff" stroke-opacity="0.5" stroke-width="5" stroke-dasharray="10,20"
              fill="none" d="M1170 350L1270 350" data-animated="true" style="animation-duration: 38.037s;"></path>
    </g>
    <g>
        <path class="leaflet-ant-path ant-path-1591603316531 leaflet-clickable" stroke-linejoin="round"
              stroke-linecap="round" stroke="#ffffff" stroke-opacity="0.5" stroke-width="5" stroke-dasharray="10,20"
              fill="none" d="M900 350L1000 350" data-animated="true" style="animation-duration: 38.037s;"></path>
    </g>
    `;
    L.svgOverlay(svgElement, bounds).addTo(map);

    map.on('click', function(e) {
      console.log(e.latlng.toString());
      return false;
    });

    map.on('zoomend', function(e) {
      console.log(map.getZoom());
    });
    this.renderPopup()
  }
  renderPopup=()=>{
    var myIcon = L.divIcon({ className: 'my-div-icon' });
    const html1 = document.querySelector('#pop1');
    const html2 = document.querySelector('#pop2');
    const html3 = document.querySelector('#pop3');
    const html4 = document.querySelector('#pop4');
    const oMarker2 = L.marker([750, 610], { icon: myIcon }).addTo(this.map);
    oMarker2.bindPopup(html1, {
      closeOnClick: false,
      autoClose: false,
      maxHeight: 250,
      maxWidth: 490,
      className: 'content22',
      offset: [0, 0],
    }).on('popupopen', function(params) {
      console.log(params);
    }).openPopup();

    const oMarker3 = L.marker([750, 1100], { icon: myIcon }).addTo(this.map);
    oMarker3.bindPopup(html2, {
      closeOnClick: false,
      autoClose: false,
      maxHeight: 250,
      maxWidth: 490,
      className: 'content22',
      offset: [0, 0],
    }).on('popupopen', function(params) {
      console.log(params);
    }).openPopup();

    const oMarker4 = L.marker([150, 200], { icon: myIcon }).addTo(this.map);
    oMarker4.bindPopup(html3, {
      closeOnClick: false,
      autoClose: false,
      maxHeight: 250,
      maxWidth: 490,
      className: 'content22',
      offset: [0, 0],
    }).on('popupopen', function(params) {
      console.log(params);
    }).openPopup();

    const oMarker5 = L.marker([150, 1480], { icon: myIcon }).addTo(this.map);
    oMarker5.bindPopup(html4, {
      closeOnClick: false,
      autoClose: false,
      maxHeight: 250,
      maxWidth: 490,
      className: 'content22',
      offset: [0, 0],
    }).on('popupopen', function(params) {
      console.log(params);
    }).openPopup();
  }
  showModal=(title,editRecord)=>{
    this.setState({
      modalTitle:title,
      editRecord:editRecord,
      editModal:true,
    })
  }
  render() {
    const {
      waterworks: { data},
    } = this.props;
    return <div style={{height:'100%',position:'relative'}}>
      <div className={'leaflet-time'}>
        数据采集时间 <span>{data.upload_time}</span>
      </div>
      <div  id={'pop1'} className={'pop-container'}>
        <div   className="pop-title">园艺场沉砂池</div>
        <div   className="pop-content">
          <div className="item">
            <li>液位(m)</li>
            <li>浊度(NTU)</li>
          </div>
          <div className="item2">
            <li>{data.item1}</li>
            <li>{data.item2}</li>
          </div>
        </div>
        <p className={'show-detail'} onClick={()=>{
          this.showModal('园艺场沉砂池历史数据',['item1','item2'])
        }}>查看详情</p>
      </div>
      <div  className={'pop-container'} id={'pop2'}>
        <div   className="pop-title">塔尔郎水厂</div>
        <div className="pop-content" >
          <div className="item">
            <li>进水流量(m³/h)</li>
            <li>出水流量(m³/h)</li>
            <li>取水口浊度(NTU)</li>
          </div>
          <div className="item2">
            <li>{data.item3}</li>
            <li>{data.item4}</li>
            <li>{data.item5}</li>
          </div>
        </div>
        <p className={'show-detail'} onClick={()=>{
          this.showModal('塔尔郎水厂历史数据',['item3','item4','item5'])
        }}>查看详情</p>
      </div>
      <div className="pop-container"  id={'pop3'}>
        <div   className="pop-title">老城区水厂</div>
        <div className="pop-content">
          <div className="item">
            <li>出水流量(m³/h)</li>
            <li>1#液位(m)</li>
            <li>2#/3#液位(m)</li>

          </div>
          <div className="item2">
            <li>{data.item8}</li>
            <li>{data.item7}</li>
            <li>{data.item6}</li>
          </div>
        </div>
        <p className={'show-detail'}  onClick={()=>{
          this.showModal('老城区水厂历史数据',['item6','item7','item8'])
        }}>查看详情</p>
      </div>
      <div className="pop-container"  id={'pop4'}>
        <div   className="pop-title">示范区水厂</div>
        <div className="pop-content" >
          <div className="item">
            <li>出水流量(m³/h)</li>
            <li>液位(m)</li>
          </div>
          <div className="item2">
            <li>{data.item10}</li>
            <li>{data.item9}</li>
          </div>
        </div>
        <p className={'show-detail'}  onClick={()=>{
          this.showModal('示范区水厂历史数据',['item9','item10'])
        }}>查看详情</p>
      </div>

      <div id={'mapDiv'} style={{
        display: 'flex',
        fontSize: '30px',
        height: '100%',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      </div>
      <Modal
        title={<BuildModalTitle visible={this.state.editModal} modalClass="editModal"
                                title={this.state.modalTitle}/>}
        destroyOnClose
        visible={this.state.editModal}
        width={1000}
        centered
        onOk={() => {
          this.setState({ editModal: false, editRecord: [] });
        }}
        className="editModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        onCancel={() => {
          this.setState({ editModal: false, editRecord: [] });
        }}

      >
        <Chart editRecord={this.state.editRecord} modalTitle={this.state.modalTitle}></Chart>

      </Modal>
    </div>;
  }
}

export default BasicList;
